<template>
  <div>
    <commonHeader :titleName="titleName"></commonHeader>
    <div class="login" style="display: flex;justify-content: space-around;">
      <div style="width: 36%;margin-top: 60px;">
        <img width="100%" src="../../assets/keji.png" />
      </div>
      <div class="login-con">
        <div style="text-align: center;height: 50px;line-height: 52px;color: black;background-color: #d6e1e84f;">
          <div style="color: #6b6a6a;">欢迎登录本地生活惠</div>
        </div>
        <div icon="log-in">
          <div class="form-con">
            <!-- 账号密码登陆 -->
            <el-form @keydown.enter.native="handleSubmit" v-if="type=='username'">
              <div class="iptClass">
                <el-input v-model="username" class="ipt" placeholder="请输入账号">
                  <span slot="prepend">
                    <i class="el-icon-user-solid" />
                  </span>
                </el-input>
              </div>
              <div class="iptClass">
                <el-input v-model="password" class="ipt" type="password" placeholder="请输入密码" show-password>
                  <span slot="prepend">
                    <i class="el-icon-lock" />
                  </span>
                </el-input>
              </div>
              <div style="padding: 15px;"><a @click="changePhone">手机号登录</a></div>
            </el-form>
            <!-- 手机号码登陆 -->
            <el-form @keydown.enter.native="handleSubmit" v-if="type=='phone'">
              <div class="iptClass">
                <el-input v-model="phone" class="ipt" placeholder="请输入手机号码">
                  <span slot="prepend">
                    <i class="el-icon-user-solid" />
                  </span>
                </el-input>
              </div>
              <div class="iptClass">
                <el-input v-model="verify_code" placeholder="请输入验证码">
                  <span slot="prepend">
                    <i class="el-icon-bangzhu" />
                  </span>
                </el-input>
                <el-button type="text" plain class="btn-code" @click="getCode(phone)">
                  <span v-if="flag">获取验证码</span>
                  <span v-else>{{time}}s重新获取</span>
                </el-button>
              </div>
              <div style="padding: 15px;"><a @click="changeUsername">账号密码登录</a></div>
            </el-form>

            <div style="text-align: center;">
              <el-button style="width: 100%;" type="primary" @click="handleSubmit">登录</el-button>
            </div>
            <!-- 登陆页面显示-->
<!--            <div style="margin-top: 15px;color: #bdbdbd;">-->
<!--              <router-link to="/register"><span id="spanleft">还没有账户？立即注册</span></router-link>-->
<!--             &lt;!&ndash; <router-link to="forget-pwd"><span id="spanright">忘记密码</span></router-link> &ndash;&gt;-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </div>
    <!-- 脚部 -->
    <div>
      <commonFooter></commonFooter>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../LoginRegisterCommon/header.vue"
  import commonFooter from "../LoginRegisterCommon/footer.vue"
  export default {
    name: 'Login',
    data() {
      return {
        username: "",
        password: "",
        phone: "",
        verify_code: "",
        type: "username",
        flag: true,
        time: "",
        titleName: "欢迎登录",
        review:"",

      }
    },
    components: {
      commonHeader,
      commonFooter
    },
    mounted() {
      if(this.$route.query.key){
        window.localStorage.setItem('user_token', this.$route.query.key);
      }
      this.checkLogin()
      this.checkStatus()
    },
    methods: {
      reload(){
        window.location.reload()
      },
      changePhone(){
        this.type = 'phone'
        this.username = ""
        this.password = ""
      },
      changeUsername(){
        this.type = 'username'
        this.phone = ""
        this.verify_code = ""
      },
      // 手机号码验证 11位数字
      checkPhone(phoneNumb) {
        var user = /^1[0-9]{10}$/
        if (!user.test(phoneNumb)) {
          this.$message({
            message: '手机号码格式错误！',
            type: 'warning'
          });
          return false
        }

        return true
      },
      async getCode(phone) {
        let checkPhoneResult = this.checkPhone(phone)
        // 判断手机号是否正确，正确则获取验证码
        if (checkPhoneResult) {
          // 调用获取验证码方法
          const res = await this.$api.sendVerificationCode({
            phone: phone
          })
          if (res.data.level == "success") {
            this.$message({
              message: '验证码发送成功,请注意查收',
              type: "success"
            })
            this.flag = false
            this.time = 60
           this.timeInterval  = setInterval(()=>{
              this.time--
              if( this.time <= 0){
                this.flag = true
                this.time = ""
                clearInterval(this.timeInterval)
              }
            },1000)
          }else{
             this.$message.error(res.data.message);
          }
        }
      },
      handleSubmit() {
        this.getlogin()
      },
      async checkLogin() {
        let _this = this
        let res = await _this.$api.getMerchantUserInfo()
        if (res.data.level == 'success') {
          // if(this.$store.state.review==1){
          //   this.$message({
          //     message: '登录成功！',
          //     type: "success",
          //     duration: 1000,
          //     onClose: () => {
          //       this.$router.push({
          //         path: '/home'
          //       })
          //     }
          //   })
          // }else{
          //   this.$message({
          //     message: '登录成功！',
          //     type: "success",
          //     duration: 1000,
          //     onClose: () => {
          //       this.$router.push({
          //         path: '/submitProcedure'
          //       })
          //     }
          //   })
          // }

          this.$message({
            message: '登录成功！',
            type: "success",
            duration: 1000,
            onClose: () => {
              this.$router.push({
                path: '/home'
              })
            }
          })
        }
      },
      async checkStatus(){
       await this.$api.getEnterpriseReviewStatus().then(resTwo => {
          //把状态存进状态管理
          this.$store.state.review = resTwo.data.data.review
          window.localStorage.setItem('review', resTwo.data.data.review);
          window.localStorage.setItem('userid', resTwo.data.data.id);
        })
      },
      async getlogin() {
        var _this = this
        let params = {}
        if(this.type == 'phone'){
            params = {
              phone : this.phone,
              verify_code:this.verify_code,
              type:this.type
            }
        }else{
          params = {
            username: _this.username,
            password: _this.password,
             type:this.type
          }
        }
        const res = await _this.$api.signIn(params)

        if (res.data.level == 'success') {
          window.localStorage.setItem('user_token', res.data.data);
          window.localStorage.setItem('isPlay', "true");//消息提醒是否语音提醒
          this.checkStatus()
            console.log("/submitProcedure22")
            this.$message({
              message: '登录成功！',
              type: "success",
              duration: 1000,
              onClose: () => {
                this.$router.push({
                  path: '/submitProcedure'
                })
              }
            })

        } else {
          this.$message.error(res.data.message);
        }
      }
    }
  }
</script>
<style lang="scss" scoped="scoped">
  .login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    background-color: #ffffff2e;

    .login-con {
      /* width: 26%;
        margin: auto;
        padding-top: 110px; */
      width: 30%;
      height: 100%;
      padding: 18px;
      margin-top: 7%;
      border: 1px solid #e3e3e3;



      .form-con {
        background-color: #ffffffe8;

        .iptClass {
          /* .code {
              width: 65%;
            } */

          .btn-code {
            width: 35%;
            height: 49px;
            margin-left: -35%;
            position: relative;
          }
        }
      }
    }
  }

  #pwrap {
    padding: 4px 20px 26px 20px;
    color: black;
  }

  #spanleft {
    float: left;

  }

  #spanright {
    float: right;
  }
</style>
<style scoped="scoped">
  .iptClass {
    margin-bottom: 2%;
    margin-top: 2%;
    border: 1px solid #ffffff1a;
  }

  .ipt {
    height: 50px;
  }

  /deep/ .el-input-group__prepend {
    background-color: #0000000f;
    border: none;
  }

  /deep/.el-input-group--prepend .el-input__inner,
  .el-input-group__append {
    background-color: #0000000f;
    height: 50px;
    border: none;
    color: #92979c;
  }

  /deep/.el-input-group__prepend {
    font-size: 18px;
  }

  /deep/.el-input__inner {
    padding: 0;
  }
</style>
